<template>
  <div class="homePage">
    <div class="robot_say">
      Hi，初次见面，我是您的智能助手，您可以通过下方文字输入，或者通过语音输入，提出您的问题，我会理解您的意图，提供您满意的答案。
    </div>
    <div class="you_say">
      <input v-model="newMessage" @keydown.enter="sendMassage" placeholder="您可以输入文字提问任何问题" />
      <div class="send">
        <img @click="voiceInput" src="@/assets/ai_model/voice.png" />
        <div class="bt" @click="sendMassage">发送</div>
      </div>
    </div>
    <div class="tips">
      <div class="list">
        <div class="list_item" v-for="item in list" :key="item.id">
          <div class="list_title">{{ item.title }}</div>
          <div class="list_content" @click="tipsSend(child)" v-for="(child, index) in item.children" :key="index">
            {{ child }}
          </div>
        </div>
      </div>
    </div>
    <div class="footer" v-if="showListen">
      <img class="voice_select" src="@/assets/ai_model/voice_select.gif" />
      <div class="footer_text">
        <span v-if="isShowTest">{{ resultText }}</span>
        <span v-else>想问什么，说来听听…</span>
      </div>
      <img class="close" @click="showListen = false" src="@/assets/ai_model/close.png" />
    </div>
    <VoiceToText v-if="showListen" ref="voiceToText" @voiceEnd="voiceEnd" />
  </div>
</template>

<script>
import VoiceToText from './voiceToText.vue'

export default {
  components: {
    VoiceToText,
  },
  props: {},
  data() {
    return {
      isShowTest: false,
      showListen: false,
      resultText: '',
      newMessage: '',
      list: [
        {
          id: 1,
          title: '路况预测管控推荐',
          children: ['短时路况预测', '节假日路况预测', '管理措施推荐'],
        },
        {
          id: 2,
          title: '交通政策法规咨询',
          children: ['道路养护报告', '交通事故报告', '交通专题报告'],
        },
        {
          id: 3,
          title: '日常管理文件生成',
          children: ['宏观政策咨询', '地方政策咨询'],
        },
      ],
    }
  },
  computed: {},
  watch: {},
  methods: {
    voiceInput() {
      this.showListen = true
      this.$nextTick(() => {
        this.$refs.voiceToText.btnControl()
      })
    },
    voiceEnd(message) {
      this.isShowTest = true
      this.resultText = message
      setTimeout(() => {
        this.newMessage = message
        this.showListen = false
        this.isShowTest = false
      }, 1000)
    },
    tipsSend(message) {
      const now = new Date()
      const time = this.formatDateToTime(now)
      localStorage.setItem('ai_message', message)
      localStorage.setItem('ai_time', time)
      this.changePage()
    },
    sendMassage() {
      if (this.newMessage) {
        const now = new Date()
        const time = this.formatDateToTime(now)
        localStorage.setItem('ai_message', this.newMessage)
        localStorage.setItem('ai_time', time)
        this.changePage()
      }
    },
    changePage() {
      this.$emit('changePage', 1)
    },
    // 格式化时间-时分
    formatDateToTime(date) {
      const h = date.getHours()
      const m = date.getMinutes()
      return `${h > 9 ? h : `0${h}`}:${m > 9 ? m : `0${m}`}`
    },
  },
  created() {

  },
  mounted() {
    
  },
}
</script>
<style scoped lang="less">
.homePage {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  .robot_say {
    width: 42.18vw;
    height: 9.167vh;
    position: absolute;
    top: 15.01vh;
    left: 25.05vw;
    background: #fdfeff;
    box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    font-size: 18px;
    font-family: MicrosoftYaHei;
    color: #333333;
    padding: 1.85vh;
  }
  .you_say {
    width: 52.08vw;
    height: 11.11vh;
    position: absolute;
    top: 32.48vh;
    left: 16.14vw;
    input {
      width: 100%;
      height: 100%;
      font-size: 2.22vh;
      font-family: MicrosoftYaHei;
      color: #333333;
      padding: 0 11.04vw 0 8.125vw;
      background: #ffffff;
      border: 2px solid #ffffff;
      border-radius: 60px;
      box-shadow: 8px 8px 20px 0px rgba(55, 82, 170, 0.1);
    }
    .send {
      position: absolute;
      top: 50%;
      right: 1.667vw;
      display: flex;
      transform: translateY(-50%);
      line-height: 5.18vh;
      align-items: center;
      img {
        width: 2.187vw;
        height: 2.187vw;
        margin-right: 2.604vw;
        cursor: pointer;
      }
      .bt {
        cursor: pointer;
        width: 4.687vw;
        height: 5.18vh;
        background: linear-gradient(180deg, #0072ee 0%, #003d89 100%);
        box-shadow: 0px 2px 4px 0px rgba(56, 131, 210, 0.5);
        border-radius: 46px;
        text-align: center;
        line-height: 5.18vh;
        font-size: 2.22vh;
        font-family: MicrosoftYaHei;
        color: #ffffff;
      }
    }
  }
  .tips {
    position: absolute;
    top: 52.98vh;
    left: 8.85vw;
    width: 66.6667vw;
    height: 18.79vh;
    background: url(~@/assets/ai_model/tips_bg.png) no-repeat 100% 100%;
    background-size: contain;
    backdrop-filter: blur(4px);
    .list {
      display: flex;
      padding: 2.685vh 10.78vw 0 8.22vw;
      .list_item {
        margin-right: 10.31vw;
        &:last-child {
          margin-right: 0;
        }
        .list_title {
          font-size: 18px;
          font-family: MicrosoftYaHei;
          color: #003d89;
          line-height: 18px;
          text-shadow: 0px 0px 1px #4c8bff;
          margin-bottom: 1.57vh;
          position: relative;
          &::before {
            content: '';
            position: absolute;
            top: 0;
            left: -1.1458vw;
            width: 0.9896vw;
            height: 0.9896vw;
            background: url(~@/assets/ai_model/arrow.png) no-repeat 100% 100%;
            background-size: cover;
          }
        }
        .list_content {
          cursor: pointer;
          font-size: 16px;
          font-family: MicrosoftYaHei;
          color: #333333;
          line-height: 32px;
          text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
        }
      }
    }
  }
  .footer {
    position: fixed;
    width: 100vw;
    height: 23.14vh;
    bottom: 0;
    left: 0;
    background: linear-gradient(180deg, #edf4fd 0%, #dfebf6 100%);
    box-shadow: 0px -2px 40px 0px rgba(0, 74, 116, 0.25);
    backdrop-filter: blur(10px);
    z-index: 6;
    .voice_select {
      position: absolute;
      top: 0;
      left: 36.5104vw;
      width: 15.625vw;
      height: 100%;
    }
    .footer_text {
      position: absolute;
      top: 50%;
      left: 51.1979vw;
      transform: translateY(-50%);
      span {
        font-size: 2.22vh;
        font-family: MicrosoftYaHei;
        color: #001a48;
      }
    }
    .close {
      cursor: pointer;
      position: absolute;
      top: 1.38vh;
      right: 0.7813vw;
      width: 1.25vw;
      height: 1.25vw;
    }
  }
}
</style>
